<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { checkPermi } from "@/utils/permission";
/** 接收iframe参数 */
interface InGetiframe {
    /** 视频端口 */
    videoPort: string;
    /** rtsp端口 */
    rtspPort: string;
    /** 煤堆序号,空值时默认1 */
    coal: "1" | "2";
}
/** 数据 */
interface InState {
    /** 数据状态 */
    loading: boolean;
    /** iframe地址 */
    iframeUrl: string;
    /** 视频ip */
    videoIp: string;
    /** 选中视频窗口数据 */
    currentData: InGetiframe;
    /** 授权 */
    checkPermipara: string[];
    /** 操作类型 */
    actionType: "history" | "realTime";
}

const deviceNameDesc: {[key: string]: string} = {
    "8055": "90度摄像机",
    "8056": "180度摄像机",
    "8057": "270度摄像机",
    "8058": "0度摄像机",
    "8075": "90度摄像机",
    "8076": "180度摄像机",
    "8077": "270度摄像机",
    "8078": "0度摄像机",
};
let state = ref<InState>({
    loading: false,
    iframeUrl: "",
    videoIp: "10.104.176.199",
    checkPermipara: ["rotatingcamera"],
    currentData: {
        videoPort: "",
        rtspPort: "",
        coal: "1"
    },
    actionType: "realTime"
})
const pageTabs = ['1#煤场', '2#煤场']
const pagetabsIndex = ref(0)
function clickPageTabs(index: number) {
    pagetabsIndex.value = index;
    gotoback();
}


const sliderVal1 = ref(0)
const sliderVal2 = ref(0)

//路由
const router = useRouter()
const route = useRoute()
/** 生命周期 */
onMounted(() => {
    // ?id=10.104.176.199:8055_5541&rc=true&coal=1&login=false
    const ips = route.query.id as string;
    const coal = route.query.coal as InGetiframe["coal"];
    state.value.currentData.coal = coal;
    pagetabsIndex.value = coal == "2" ? 1 : 0;
    if (ips) {
        const [ip, ports] = ips.split(":");
        const [video, rtsp] = ports.split("_");
        state.value.videoIp = ip;
        state.value.currentData.videoPort = video;
        state.value.currentData.rtspPort = rtsp;
        setUrl();
    }
})
function gotoback() {
    // router.go(-1)
    state.value.iframeUrl = "";
    router.push(`/stock/video?coal=${pagetabsIndex.value + 1}`);
}
function setUrl() {
    setTimeout(() => {
        state.value.iframeUrl = `${window.location.origin}/coalyard/video/${state.value.actionType === "realTime" ? "videoCtrl" : "videoHistory"}.html?id=${state.value.videoIp}:${state.value.currentData.videoPort}_${state.value.currentData.rtspPort}&rc=${true || checkPermi(state.value.checkPermipara)}&coal=${pagetabsIndex.value + 1}`;
    }, 300);
}
function cahngeAction(params: InState["actionType"]) {
    state.value.actionType = params;
    setUrl();
}
</script>
<template>
    <div class="bg_black">
        <ul class="page_black_tabs">
            <li v-for="(item, index) in pageTabs" :class="pagetabsIndex == index ? 'hover' : ''" @click="clickPageTabs(index)">{{ item }}</li>
        </ul>
        <div class="video_info_tabs">
            <h3>{{ deviceNameDesc[state.currentData.videoPort] }}</h3>
            <ul>
                <li :class="{ 'hover': state.actionType === 'realTime' }" @click="cahngeAction('realTime')">实时视频</li>
                <li :class="{ 'hover': state.actionType === 'history' }" @click="cahngeAction('history')">视频回放</li>
            </ul>
            <div class="btn_back" @click="gotoback">
                <img src="../../assets/img/ico_back.png" alt="">
                返回
            </div>
        </div>
        <div style="height: calc(100vh - 216px);">
            <iframe v-if="state.iframeUrl" :src="state.iframeUrl" frameborder="0" width="100%" height="100%"></iframe>
        </div>
        <!-- <div class="streaming">
            <div class="mv_ph">
                <img class="ph" src="../../assets/img/1.jpg" alt="">
                <p>CAM01   09/09/2023  星期一  13:23:41</p>
            </div>
            <div class="mv_control">
                <h3>云台控制</h3>

                <div class="control_btn">
                    <div class="refresh">
                        <img src="../../assets/img/ico_9.png" alt="">
                    </div>
                    <div class="caret_top">
                        <el-icon color="#fff" size="26"><CaretTop /></el-icon>
                    </div>
                    <div class="caret_bottom">
                        <el-icon color="#fff" size="26"><CaretBottom /></el-icon>
                    </div>
                    <div class="caret_left">
                        <el-icon color="#fff" size="26"><CaretLeft /></el-icon>
                    </div>
                    <div class="caret_right">
                        <el-icon color="#fff" size="26"><CaretRight /></el-icon>
                    </div>
                </div>
                <div class="control_slider">
                    <span class="name">变倍</span>
                    <el-slider v-model="sliderVal1" />
                </div>
                <div class="control_slider">
                    <span class="name">变焦</span>
                    <el-slider v-model="sliderVal2" />
                </div>
                <div class="button_gray">
                    <el-button color="#63626A" size="large" round style="width: 180px;" >截屏</el-button>
                </div>
            </div>

        </div> -->

    </div>
</template>
<style scoped lang="scss">
.video_info_tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    margin: 20px 20px 0;
    background: #45424A;
    padding: 0 20px;

    h3 {
        font-weight: bold;
        font-size: 18px;
        color: #468EFF;
        line-height: 20px;
    }

    ul {
        display: flex;
        align-items: center;

        li {
            color: #fff;
            font-size: 16px;
            color: #9D9D9D;
            line-height: 20px;
            padding: 0 30px;
            cursor: pointer;
            border-right: 1px solid #535353;

            &:last-child {
                border: none;
            }

            &.hover {
                color: #fff;
            }
        }
    }

    .btn_back {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 16px;
        line-height: 20px;
        cursor: pointer;

        img {
            margin-right: 5px;
        }
    }
}
</style>